<template>
  <div class="permissions-container">
    <div class="app-container">
      <el-card>
        <el-button
          type="primary"
          size="small"
          @click="handleOpenAddDialog(1, '0')"
          >添加权限</el-button
        >
        <el-table
          border
          stripe
          style="margin-top: 20px"
          :data="permTreeData"
          row-key="id"
          default-expand-all
        >
          <el-table-column label="名称" prop="name"></el-table-column>
          <el-table-column label="标识" prop="code"></el-table-column>
          <el-table-column label="操作" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template #default="{ row }">
              <el-button
                type="text"
                v-if="row.type === 1"
                @click="handleOpenAddDialog(2, row.id)"
                >添加权限</el-button
              >
              <el-button type="text" @click="handleOpenEditDialog(row.id)"
                >编辑</el-button
              >
              <el-button type="text" @click="handleDel(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog
        title="新增权限"
        :visible="showAddDialog"
        @close="handleAddClose"
      >
        <el-form label-width="80px">
          <el-form-item label="权限名称"
            ><el-input style="width: 90%" v-model="permForm.name"
          /></el-form-item>
          <el-form-item label="权限标识"
            ><el-input style="width: 90%" v-model="permForm.code"
          /></el-form-item>
          <el-form-item label="权限描述"
            ><el-input style="width: 90%" v-model="permForm.description"
          /></el-form-item>
          <el-form-item label="权限启用"
            ><el-switch
              v-model="permForm.enVisible"
              active-color="#409EFF"
              inactive-color="#ccc"
              active-value="1"
              inactive-value="0"
          /></el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handleAddClose">取消</el-button>
          <el-button type="primary" @click="handleAdd">确认</el-button>
        </template>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog
        title="编辑权限"
        :visible="showEditDialog"
        @close="handleEditClose"
      >
        <el-form label-width="80px">
          <el-form-item label="权限名称"
            ><el-input style="width: 90%" v-model="permForm.name"
          /></el-form-item>
          <el-form-item label="权限标识"
            ><el-input style="width: 90%" v-model="permForm.code"
          /></el-form-item>
          <el-form-item label="权限描述"
            ><el-input style="width: 90%" v-model="permForm.description"
          /></el-form-item>
          <el-form-item label="权限启用"
            ><el-switch
              v-model="permForm.enVisible"
              active-color="#409EFF"
              inactive-color="#ccc"
              active-value="1"
              inactive-value="0"
          /></el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="handleEditClose">取消</el-button>
          <el-button type="primary" @click="handleEdit">确认</el-button>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPermListAPI,
  addPermAPI,
  getPermDetailAPI,
  editPermAPI,
  delPermAPI,
} from "@/api/permissions";
import { list2Tree } from "@/utils/shift";
export default {
  name: "PermissionsView",
  data() {
    return {
      // 权限树形列表
      permTreeData: [],
      // 编辑弹框显示
      showEditDialog: false,
      showAddDialog: false,
      //权限表单
      permForm: {
        name: "",
        code: "",
        description: "",
        enVisible: "1",
      },
    };
  },
  created() {
    this.getPerList();
  },
  methods: {
    //新增权限弹窗打开时
    handleOpenAddDialog(type, pid) {
      // 保存  赋值
      // type:1->页面访问权 2：-》2按钮操作权
      (this.type = type), (this.pid = pid);

      this.showAddDialog = true;
    },
    //获取列表
    async getPerList() {
      const resp = await getPermListAPI();
      // 把列表转为树形
      this.permTreeData = list2Tree(resp.data, "0");
    },
    // 新增弹窗
    handleAddClose() {
      this.showAddDialog = false;
    },
    //新增权限
    async handleAdd() {
      //校验
      //发请求
      await addPermAPI({
        ...this.permForm,
        type: this.type,
        pid: this.pid,
      });
      //关闭弹窗
      this.handleAddClose();
      //重新获取列表
      this.getPerList();
    },
    // 编辑弹框关闭
    handleEditClose() {
      this.showEditDialog = false;
    },
    //编辑弹框打开
    async handleOpenEditDialog(id) {
      this.showEditDialog = true;
      //获取详情
      const resp = await getPermDetailAPI(id);
      // console.log(resp);
      // 回显
      this.permForm = resp.data;
    },
    //编辑权限
    async handleEdit() {
      try {
        // 发请求
        await editPermAPI(this.permForm);
        // 关闭弹窗
        this.handleEditClose();
        // 获取数据
        this.getPerList();
        //chenggong
        this.$message.success("CHENGGONG");
      } catch (err) {
        ("权限不够");
      }
    },
    //删除权限
    async handleDel(id) {
      try {
        await delPermAPI(id);
        //获取列表
        this.getPerList();
      } catch (err) {
        this.$message.error("删除失败");
      }
    },
  },
};
</script>

<style>
</style>
